
<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/jquery.min.js"></script> 
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/jquery-ui.min.js"></script>

    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.-->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/trirand/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../Guriddo_jqGrid_JS_demo/css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../Guriddo_jqGrid_JS_demo/css/trirand/ui.jqgrid.css" />

    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Toolbar Searching with Search Options</title>
</head>
<body>

    <style type="text/css">

        /* set the size of the datepicker search control for Order Date*/
        #ui-datepicker-div { font-size:11px; }
        
        /* set the size of the autocomplete search control*/
        .ui-menu-item {
            font-size: 11px;
        }

         .ui-autocomplete {
            font-size: 11px;
        }       

    </style>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript"> 
    
        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'data.json',
                mtype: "GET",
                datatype: "json",
                page: 1,
                colModel: [
                    {   label : "Order ID",
						//sorttype: 'integer',
						name: 'OrderID', 
						key: true, 
						width: 75,
						searchoptions: {
                            // show search options
                            sopt: ["in","ni", "ge","le","eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {
						label: "Customer ID",
                        name: 'CustomerID',
                        width: 150, 
						stype : "select"
                    },
                    { 
						label: "Order Date",
                        name: 'OrderDate',
                        width: 150,
						sorttype:'date',
                        searchoptions: {
                            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                            // use it to place a third party control to customize the toolbar
                            dataInit: function (element) {
                                $(element).datepicker({
                                    id: 'orderDate_datePicker',
                                    dateFormat: 'yy-mm-dd',
                                    //minDate: new Date(2010, 0, 1),
                                    maxDate: new Date(2020, 0, 1),
                                    showOn: 'focus'
                                });
                            },
                            // show search options
                            sopt: ["ge","le","eq"] // ge = greater or equal to, le = less or equal to, eq = equal to							
                        }
                    },                    
                    {
						label : "Ship Name",
                        name: 'ShipName',
                        width: 150,
                        searchoptions: {
                            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                            // use it to place a third party control to customize the toolbar
                            dataInit: function (element) {
                                $(element).autocomplete({
                                    id: 'AutoComplete',
                                    source: function(request, response){
										this.xhr = $.ajax({
											url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName',
											data: request,
											dataType: "jsonp",
											success: function( data ) {
												response( data );
											},
											error: function(model, response, options) {
												response([]);
											}
										});
									},
                                    autoFocus: true
                                });
                            }
						}
                    },
                    {
						label: "Freight",
						sorttype: 'number',
						name: 'Freight', width: 150,
						//searchrules : {number:true},
						searchoptions : {
                            // show search options
                            sopt: ["ge","le","eq"] // ge = greater or equal to, le = less or equal to, eq = equal to  							
						}
					}
                ],
				loadonce: true,
				viewrecords: true,
                width: 780,
                height: 250,
                rowNum: 10,
                pager: "#jqGridPager"
            });
			// activate the toolbar searching
            $('#jqGrid').jqGrid('filterToolbar',{
                // JSON stringify all data from search, including search toolbar operators
                stringResult: true,
                // instuct the grid toolbar to show the search options
                searchOperators: true
            });
			$('#jqGrid').jqGrid('navGrid', '#jqGridPager',{},{},{},{},
				{ multipleSearch : true	
				//stringResult : false
				//multipleGroup : true
				}
			);
			setTimeout( function() {
			$('#jqGrid').jqGrid('autoSelect', {
				field : "CustomerID"
			});}, 50);
        });

    </script>

</body>
</html>